<template>
  <div>
    <MainSearchDetail v-model="visible"
                      :title="title">
      <div class="search-left">
        <div class="top flex j-between">
          <div class="left border-spot p-20 m-r-30">
            <img :src="detail.fileurl ? detail.fileurl : treeImg">
            <span class="status">
              <Icon custom="i-icon icon-shengchangjilu"
                    size="16" />
              {{detail.others ? detail.others[0].growthSituation : '- -'}}
            </span>
          </div>
          <div class="right">
            <div class="tree-msg">
              <div class="fs-24 m-b-10">树种信息</div>
              <div class="list flex j-between m-b-10">
                <p>树种：<span>{{treeVarieties.treespecname || '- -'}}</span></p>
                <p>生长类型：<span>{{treeVarieties.growntype || '- -'}}</span></p>
              </div>
              <div class="list flex m-b-10">
                <p class="min-w-90">养护建议：</p>
                {{treeVarieties.maintenanceadvice || '- -'}}
              </div>
              <ul class="list flex flex-wrap">
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">树高：</p>
                  <span>{{detail.others ? detail.others[0].treeHeight + 'm' : '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">学名：</p>
                  <span>{{detail.others ? detail.others[0].scientificName : '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-60">科属：</p>
                  <span>{{treeVarieties.families || '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">树叶密度：</p>
                  <span>{{detail.others ? detail.others[0].leavesDensity + '%' : '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">状态：</p>
                  <span>{{detail.status || '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">树冠：</p>
                  <span>{{detail.others ? detail.others[0].crown : '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">地径：</p>
                  <span>{{detail.others ? detail.others[0].groundDiameter + 'm' : '- -'}}</span>
                </li>
                <li class="w-p-25 flex m-b-10">
                  <p class="min-w-40">胸径：</p>
                  <span>{{detail.others ? detail.others[0].dbh + 'm' : '- -'}}</span>
                </li>
              </ul>
            </div>
            <div class="">
              <div class="fs-24 m-b-15">实时状态</div>
              <div class="status border-spot">
                <Echarts width="300px"
                         height="250px"
                         key="szqk"
                         :options="gcOptions"
                         class="echarts"></Echarts>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom m-t-20 m-b-20 flex">
          <div class="left">
            <div class="title fs-24 border-spot">古树资料</div>
            <div class="p-l-20 p-r-20 border-spot fs-18 p-t-30 p-b-30">
              <ul class="list flex flex-wrap m-b-20">
                <li class="flex w-p-50">
                  <p>树木类型：</p>
                  <span>珍稀名木</span>
                </li>
                <li class="flex w-p-50">
                  <p class="min-w-100">所属机构：</p>
                  <span>{{detail.departName || '- -'}}</span>
                </li>
                <li class="flex w-p-50">
                  <p>责任人：</p>
                  <span>{{detail.principal || '- -'}}</span>
                </li>
                <li class="flex w-p-50">
                  <p class="min-w-100">维护单位：</p>
                  <span>{{detail.maintain || '- -'}}</span>
                </li>
              </ul>
              <ul class="list m-b-30">
                <li class="flex m-b-20">
                  <p class="min-w-100">生长地址：</p>
                  <span>{{detail.site || '- -'}}</span>
                </li>
                <li class="flex">
                  <p class="min-w-100">保护措施：</p>
                  <span>{{detail.others ? detail.others[0].safeguardProcedures : '- -'}}</span>
                </li>
              </ul>
              <div style="line-height:36px">
                {{detail.others ? detail.others[0].introduction : ''}}
              </div>
            </div>
            <div class="btn">
              <div @click.stop="onClickSkill">技术资料</div>
              <div :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
                   @click.stop="onClickVideo">
                <Icon custom="i-icon icon-jiankong11"
                      size="22" />
                摄像头
              </div>
            </div>
          </div>
          <div class="right">
            <div class="border-bottom-spot fs-24 p-b-30">
              养护作业
            </div>
            <div class="border-bottom-spot flex p-t-30 p-b-30">
              <div class="w-p-25 flex">
                <Icon custom="i-icon icon-yanghutianshu"
                      size="42"
                      class="m-r-10 work-icon" />
                <div>
                  <p>养护次数</p>
                  <span>{{maintainCount}}</span>
                </div>
              </div>
              <div class="w-p-25 flex">
                <Icon custom="i-icon icon-yanghucishu"
                      size="42"
                      class="m-r-10 work-icon" />
                <div>
                  <p>养护天数</p>
                  <span>{{maintainDays}}</span>
                </div>
              </div>
            </div>
            <ul class="list flex m-t-30 m-b-50">
              <li class="w-p-50 flex">
                <p>养护周期：</p>
                <span>{{detail.others ? detail.others[0].maintenanceCycle + '一次' : '- -'}}</span>
              </li>
              <li class="w-p-50 flex">
                <p>养护方式：</p>
                <span>{{detail.others ? detail.others[0].curingWay : '- -'}}</span>
              </li>
            </ul>
            <ul class="work-list">
              <li class="work-list-item"
                  v-for="(item,index) in workRecordArr"
                  :key="index">
                <div class="time">{{item.createTime}}</div>
                <div class="name">{{item.createName}}</div>
                <div class="cont">
                  {{item.title + ' | '}}{{item.des}}
                </div>
                <div class="status"
                     v-if="detail.others && detail.others[0]">
                  {{detail.others ? detail.others[0].curingWay : ''}}
                </div>
                <div class="multimedia">
                  <div class="item video-item"
                       v-previewVideo="item.videourl"
                       v-if="item.videourl">
                    <Icon custom="i-icon icon-bofang"
                          size="25"
                          color='#fff'></Icon>
                  </div>
                  <div class="item"
                       v-for="(items,indexs) in item.imgurls"
                       :key="indexs">
                    <el-image :src="items"
                              fit="cover"
                              :preview-src-list="[items]"
                              class="detail-top-img"
                              v-if="item.imgurls.length != 0">
                    </el-image>
                  </div>
                </div>
              </li>
              <infinite-loading @infinite="getTreeMaintainPageList"
                                :distance="10"
                                ref="infiniteLoading">
                <span slot="no-results">
                  暂无更多养护记录
                </span>
                <span slot="no-more">
                  暂无更多养护记录
                </span>
              </infinite-loading>
            </ul>
          </div>
        </div>
      </div>
    </MainSearchDetail>

    <Modal v-model="skillVisible"
           footer-hide
           title="技术资料"
           width="1024">
      <div class="skill noScroll">
        <div class="skill-title">
          {{technical.name}}
        </div>
        <div class="skill-tip">
          {{technical.maintain}} | {{technical.sphereApplication}}
        </div>
        <div class="skill-cont">
          {{technical.cont}}
        </div>
      </div>
    </Modal>

    <Modal v-model="issueVisible"
           footer-hide
           title="问题整改"
           width="1024">
      <div class="issue noScroll">
        <ul class="issue-tabs">
          <li @click.stop="onClickIssueTabs(0)"
              :class="{current:issueTabsIndex == 0}">巡查上报</li>
          <li @click.stop="onClickIssueTabs(1)"
              :class="{current:issueTabsIndex == 1}">公众投诉</li>
        </ul>
        <div class="issue-title">
          <div class="issue-title-item">
            <span>责任部门</span>
            <MyTreeSelect search
                          v-model="assignTree"
                          :data="assignTreeData"
                          style="width: 163px;"></MyTreeSelect>
          </div>
          <div class="issue-title-item">
            <span>问题类型</span>
            <Select v-model="issueTypeValue"
                    style="width:120px">
              <Option v-for="item in issueTypeList"
                      :value="item.id"
                      :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="issue-title-item">
            <span>加油日期</span>
            <DatePicker type="date"
                        placeholder="开始时间"
                        style="width: 120px"></DatePicker>
            <span>-</span>
            <DatePicker type="date"
                        placeholder="结束时间"
                        style="width: 120px"></DatePicker>
          </div>
          <div class="issue-title-item">
            <div>查询</div>
            <div>充值</div>
          </div>
        </div>
        <div>
          <Table :columns="patrolColumns"
                 :data="patrolData"></Table>
        </div>
        <div class="issue-page">
          <Page :total="0"
                size="small"
                show-elevator
                show-sizer
                show-total />
        </div>
      </div>
    </Modal>

  </div>
</template>

<script>
import bus from '@/utils/bus'
import MainSearchDetail from "../template/MainSearchDetail.vue";
import MyTreeSelect from '@/components/common/MyTreeSelect';
import Echarts from '../../../common/Echarts';
import { formatDate } from '@/utils/dateRangUtil';
import InfiniteLoading from 'vue-infinite-loading';
export default {
  components: {
    MainSearchDetail,
    MyTreeSelect,
    Echarts,
    InfiniteLoading
  },
  data () {
    return {
      visible: false,
      dataId: '',
      title: '',
      detail: {},
      treeImg: require('../../../../assets/demo/tree.png'),
      // 技术资料
      skillVisible: false,
      technical: {},
      // 问题整改
      issueVisible: false,
      // 问题整改 tabs
      issueTabsIndex: 0,
      assignTree: '',
      assignTreeData: [
        {
          title: '山东蜻蜓数字科技有限公司',
          value: 1,
          children: [{
            title: '奎文区',
            value: 11,
            children: [{
              title: '山东蜻蜓数字科技有限公司',
              value: 111,
              children: [{
                title: '保洁队',
                value: 1111
              }, {
                title: '公厕队',
                value: 1112
              }, {
                title: '运输队',
                value: 1113
              }, {
                title: '建筑队',
                value: 1114
              }, {
                title: '园林队',
                value: 1115
              }]
            }]
          }]
        }
      ],
      issueTypeValue: 1,
      issueTypeList: [
        {
          id: 1,
          name: '全部'
        },
        {
          id: 2,
          name: '堆弃杂物'
        },
        {
          id: 3,
          name: '垃圾污染'
        },
        {
          id: 4,
          name: '水域污染'
        },
        {
          id: 5,
          name: '排水堵塞'
        },
        {
          id: 6,
          name: '景观污染损坏'
        },
        {
          id: 7,
          name: '设施污染损坏'
        }
      ],
      patrolColumns: [
        {
          title: '问题类型',
          key: 'type'
        },
        {
          title: '上报时间',
          key: 'time'
        },
        {
          title: '问题地点',
          key: 'site'
        },
        {
          title: '问题描述',
          key: 'desc'
        }
      ],
      patrolData: [],
      gcOptions: {
        title: {
          text: '土壤状态',
          textStyle: {
            color: '#34D7AC',
            fontSize: 14
          }
        },
        radar: {
          indicator: [
            { name: '土壤水分', max: 260 },
            { name: '土壤温度', max: 260 },
            { name: 'PH值', max: 260 },
            { name: '有机值', max: 260 },
            { name: '矿物质', max: 260 },
          ]
        },
        series: [
          {
            name: '土壤状态',
            type: 'radar',
            data: [
              {
                value: [100, 260, 150, 200, 146, 243],
                name: '土壤状态'
              }
            ]
          }
        ]
      },
      // 日志记录
      workRecordArr: [],
      pageNum: 1,
      pageSize: 3,
      totalPage: 0,
      // 树种相关字段
      treeVarieties: {},
      maintainCount: 0, // 养护次数
      maintainDays: 0 // 养护天数
    }
  },
  watch: {
    dataId (newVal) {
      if (newVal) {
        this.getDetail()
        this.getTreeMaintainList()
        this.getTreeMaintainDays()
      }
    },
    visible (newVal) {
      if (!newVal) {
        this.dataId = ''
        this.pageNum = 1
        this.totalPage = 0
        this.workRecordArr = []
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      bus.$on('showMainSearchTreeDetail', data => {
        this.dataId = data.id
        this.title = data.title
        this.visible = true
      })
      this.timeInit()
    },
    getDetail () {
      this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
        this.detail = res
        if (this.detail.status == 0) {
          this.detail.status = '正常'
        } else if (this.detail.status == 1) {
          this.detail.status = '废弃'
        } else if (this.detail.status == 2) {
          this.detail.status = '维修'
        } else if (this.detail.status == 3) {
          this.detail.status = '拆除'
        } else if (this.detail.status == 4) {
          this.detail.status = '暂停'
        }
        this.getTreeDetailVarieties()
      })
    },
    timeInit () {
      let time = new Date()
      this.day = time.getDate()
    },
    // 获取树种相关字段
    getTreeDetailVarieties () {
      let treeVarietiesId = this.detail.others[0].family.split(',')[1]
      if (treeVarietiesId) {
        this.$http.getTreeDetailVarieties({ id: treeVarietiesId }).then((res) => {
          this.treeVarieties = res.result
        })
      }
    },
    // 获取养护记录
    getTreeMaintainList () {
      let params = {
        treeId: this.dataId,
        page: this.pageNum,
        size: this.pageSize
      }
      this.$http.getMapTreeMaintainList(params).then(res => {
        if (res.code == 200) {
          this.workRecordArr = res.result.treeMaintains.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
          this.maintainCount = res.result.total
          this.totalPage = res.result.pages
          this.pageNum++
        }
      })
    },
    // 获取养护记录分页列表
    getTreeMaintainPageList ($state) {
      if (this.pageNum >= this.totalPage) {
        $state.complete()
        return
      }
      let params = {
        treeId: this.dataId,
        page: this.pageNum,
        size: this.pageSize
      }
      this.$http.getMapTreeMaintainList(params).then(res => {
        if (res.code == 200) {
          let arr = res.result.treeMaintains.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
          this.workRecordArr = this.workRecordArr.concat(arr)
          this.pageNum++
          $state.loaded()
        }
      })
    },
    // 获取养护天数
    getTreeMaintainDays () {
      let params = {
        id: this.dataId
      }
      this.$http.getMapTreeMaintainDays(params).then(res => {
        if (res.code == 200) {
          this.maintainDays = res.result.conserveDayNum
        }
      })
    },
    // 摄像头
    onClickVideo () {
      if (this.detail.videoonlinestatus == 1) return
      let params = {
        equipcode: this.detail.equipcode,
        eqptype: this.detail.eqptype,
        details: this.detail.channels,
      }
      bus.$emit('showPlayVideoModal', params)
    },
    // 技术资料
    onClickSkill () {
      this.skillVisible = true
      this.$store.dispatch('getConserveDetail', this.detail.others[0].technical).then(res => {
        this.technical = res
      })
    },
    // 问题整改
    onClickIssue () {
      this.issueVisible = true
    },
    // 问题整改 tabs
    onClickIssueTabs (i) {
      this.issueTabsIndex = i
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/modal";
::v-deep {
  .ivu-modal-body {
    padding: 0;
  }
}
.search-left {
  color: #ffffff;
  .top {
    .left {
      width: 590px;
      height: 620px;
      img {
        width: 550px;
        height: 580px;
        object-fit: cover;
      }
      .status {
        position: absolute;
        right: -16px;
        bottom: -5px;
        display: block;
        width: 85px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background: url(../../../../assets/main/ancient-text-bac.png) no-repeat;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        z-index: 1;
      }
    }
    .right {
      .tree-msg {
        width: 570px;
      }
      .status {
        width: 570px;
        height: 322px;
        .echarts {
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%);
        }
      }
    }
  }
  .bottom {
    .left {
      width: 590px;
      margin-right: 35px;
      .title {
        line-height: 65px;
        padding-left: 20px;
        border-bottom: 0;
      }
      .title::after {
        height: 0px;
      }

      .btn {
        display: flex;
        flex-wrap: wrap;
        padding-top: 20px;
        justify-content: center;
        div {
          width: 116px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          background: #095844;
          color: #fff;
          border: 1px solid #15876a;
          margin-right: 46px;
          margin-bottom: 20px;
          cursor: pointer;
        }
      }
    }
    .right {
      width: 575px;
      .work-icon {
        background-image: linear-gradient(-90deg, #25bb96, #7aa948);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .work-list {
        max-height: 350px;
        overflow-y: auto;
        .work-list-item {
          margin-bottom: 40px;
          position: relative;
          .time {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
          }
          .name {
            font-size: 16px;
            color: #999999;
          }
          .cont {
            font-size: 16px;
            color: #999999;
          }
          .status {
            width: 80px;
            line-height: 34px;
            background: #666666;
            border-radius: 17px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
          }
          .multimedia {
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 32%;
              margin-right: 2%;
              img {
                width: 100%;
              }
            }
            .item:nth-child(3n) {
              margin-right: 0;
            }
            .video-item {
              position: relative;
              background: #797979;
              i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
  }
}

// 边框的点
.border-spot {
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-spot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
.border-spot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
.border-bottom-spot {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-bottom-spot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
// 列表
.list {
  font-size: 18px;
  p {
    color: #999999;
  }
  span {
    color: #ffffff;
  }
}

.skill {
  background: #3a3c3e;
  padding: 25px 54px;
  box-sizing: border-box;
  max-height: 600px;
  overflow-y: auto;

  .skill-title {
    text-align: center;
    font-size: 24px;
    color: #f1f0e9;
    line-height: 32px;
  }

  .skill-tip {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(241, 240, 233, 0.4);
    line-height: 32px;
  }

  .skill-cont {
    color: #fff;
    word-break: break-all;
  }
}

.issue {
  .issue-tabs {
    display: flex;
    padding: 0 14px;

    li {
      height: 39px;
      line-height: 39px;
      box-sizing: border-box;
      margin: 0 15px;
      color: #fff;
      cursor: pointer;
    }

    .current {
      color: #25bb96;
      border-bottom: 2px solid #25bb96;
    }
  }

  .issue-title {
    display: flex;
    background: #3a3c3e;
    padding: 13px 0;

    .issue-title-item {
      display: flex;
      align-items: center;
      margin-right: 6px;
      vertical-align: top;

      span {
        text-align: right;
        vertical-align: middle;
        // float: left;
        font-size: 14px;
        color: #515a6e;
        line-height: 1;
        padding: 10px 12px 10px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.65);
        padding-left: 20px;
      }
    }

    .issue-title-item:last-child {
      width: 15%;
      justify-content: flex-end;
      color: #ffffff;

      div {
        width: 60px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
      }

      div:first-child {
        background: #25bb96;
        margin-right: 5px;
      }

      div:last-child {
        border: 1px solid rgba(230, 230, 230, 0.4);
      }
    }
  }

  .issue-page {
    height: 44px;
    line-height: 44px;
    text-align: center;
  }
}
</style>
